<template>
    <div>
        <div class="headerSty" style="margin: 20px 0 10px;">
            <div class="headerLeftSty">
                <div class="navSty"></div>
                <div class="textSty">低值易耗材料清单</div>
            </div>
            <el-button type="primary" @click="addList" v-if="dataForm.status < 5">新增一行</el-button>
        </div>
        <div>
            <el-table :data="billData" style="width: 100%">
                <el-table-column type="index" label="序号" width="180" />
                <el-table-column prop="materialName" label="材料设备名称" width="180">
                    <template slot-scope="scope">
                        <el-input placeholder="请录入" @blur="updateFloorAlias(scope.row)"
                            v-model="scope.row.materialName"></el-input>
                    </template>
                </el-table-column>
                <el-table-column prop="specificationModel" label="规格型号" width="180">
                    <template slot-scope="scope">
                        <el-input placeholder="请录入" @blur="updateFloorAlias(scope.row)"
                            v-model="scope.row.specificationModel"></el-input>
                    </template>
                </el-table-column>
                <el-table-column prop="price" label="单价（元）">
                    <template slot-scope="scope">
                        <!-- <el-input placeholder="请录入" @blur="updateFloorAlias(scope.row)" v-model="scope.row.price"
                            type="number"></el-input> -->
                        <el-input-number v-model="scope.row.price" @blur="updateFloorAlias(scope.row)" :min="0"
                            :max="999999" placeholder="请录入" controls-position="right" :precision="2"
                            style="width: 100%;" />
                    </template>
                </el-table-column>
                <el-table-column prop="unit" label="单位">
                    <template slot-scope="scope">
                        <el-input placeholder="请录入" @blur="updateFloorAlias(scope.row)"
                            v-model="scope.row.unit"></el-input>
                    </template>
                </el-table-column>
                <el-table-column prop="remark" label="备注">
                    <template slot-scope="scope">
                        <el-input placeholder="请录入" @blur="updateFloorAlias(scope.row)"
                            v-model="scope.row.remark"></el-input>
                    </template>
                </el-table-column>
                <el-table-column prop="estimatedCost" label="操作" v-if="dataForm.status < 5">
                    <template slot-scope="scope">
                        <el-button type="text" icon="el-icon-circle-close" @click="delFloorAlias(scope.row.id)"
                            style="color: red;"></el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>

        <div class="headerSty" style="margin: 20px 0 10px;">
            <div class="headerLeftSty">
                <div class="navSty"></div>
                <div class="textSty">项目消防维保初检情况及处理建议</div>
            </div>
            <el-button type="primary" @click="addAdvList" v-if="dataForm.status < 5">新增一行</el-button>
        </div>
        <div>
            <el-table :data="adviseData" style="width: 100%">
                <el-table-column type="index" label="序号" width="180"/>
                <el-table-column prop="question" label="问题" width="180">
                    <template slot-scope="scope">
                        <el-input placeholder="请录入" @blur="updateAdvise(scope.row)"
                            v-model="scope.row.question"></el-input>
                    </template>
                </el-table-column>
                <el-table-column prop="processingScheme" label="处理方案" width="180">
                    <template slot-scope="scope">
                        <el-input placeholder="请录入" @blur="updateAdvise(scope.row)"
                            v-model="scope.row.processingScheme"></el-input>
                    </template>
                </el-table-column>
                <el-table-column prop="hazardLevel" label="危险等级">
                    <template slot-scope="scope">
                        <el-input placeholder="请录入" @blur="updateAdvise(scope.row)"
                            v-model="scope.row.hazardLevel"></el-input>
                    </template>
                </el-table-column>
                <el-table-column prop="demand" label="需求">
                    <template slot-scope="scope">
                        <el-input placeholder="请录入" @blur="updateAdvise(scope.row)"
                            v-model="scope.row.demand"></el-input>
                    </template>
                </el-table-column>
                <el-table-column prop="estimatedCost" label="预估人工费用（元）">
                    <template slot-scope="scope">
                        <!-- <el-input placeholder="请录入" @blur="updateAdvise(scope.row)" v-model="scope.row.estimatedCost"
                            type="number"></el-input> -->
                        <el-input-number v-model="scope.row.estimatedCost" @blur="updateAdvise(scope.row)" :min="0"
                            :max="999999" placeholder="请录入" controls-position="right" :precision="2"
                            style="width: 100%;" />
                    </template>
                </el-table-column>
                <el-table-column prop="estimatedCost" label="操作" v-if="dataForm.status < 5">
                    <template slot-scope="scope">
                        <el-button type="text" icon="el-icon-circle-close" @click="delAdvise(scope.row.id)"
                            style="color: red;"></el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div>
            <el-button type="danger" style="margin-top: 12px;" @click="prev">上一步</el-button>
            <el-button type="primary" style="margin-top: 12px;" @click="changeOptions"
                v-if="dataForm.status < 5 || dataForm.status == 10">下一步</el-button>
        </div>

    </div>
</template>
<script>

import {
    getBillList, addBillList, putBillList, getAdviseList, addAdviseList, putAdviseList, delBillList, delAdviseList
} from "@/api/contract/contractOrg";
export default {
    props: {
        dataForm: {
            type: Object,
            default: {},
        }
    },
    data() {
        return {
            form: {},
            // 表单校验
            rules: {},
            billData: [],
            adviseData: [],
        }
    },
    created() {
        this.getList()
        this.getAdvList()
    },
    methods: {
        getList() {
            getBillList(this.dataForm.projectSaveDTO.id).then(res => {
                this.billData = res.data
            })
        },
        getAdvList() {
            getAdviseList(this.dataForm.projectSaveDTO.id).then(res => {
                this.adviseData = res.data
            })
        },
        addList() {
            addBillList({ projectId: this.dataForm.projectSaveDTO.id }).then(res => {
                this.getList()
            })
        },
        addAdvList() {
            addAdviseList({ projectId: this.dataForm.projectSaveDTO.id }).then(res => {
                this.getAdvList()
            })
        },
        updateFloorAlias(row) {
            putBillList(row).then(res => {
                this.getList()
            })
        },
        updateAdvise(row) {
            putAdviseList(row).then(res => {
                this.getAdvList()
            })
        },
        delFloorAlias(id) {
            delBillList(id).then(res => {
                this.getList()
            })
        },
        delAdvise(id) {
            delAdviseList(id).then(res => {
                this.getAdvList()
            })
        },
        prev() {
            this.$emit('prev', 2)
        },
        changeOptions() {
            if (this.dataForm.projectSaveDTO) {
                if (this.dataForm.projectSaveDTO.operators) {
                    this.getTypeOfAll()
                }
            }
            this.dataForm.status = this.dataForm.status > 3 ? this.dataForm.status : 4
            this.$nextTick(() => {
                this.$emit('refreshInfo', this.dataForm)
            })
        },
        //判定
        getTypeOfAll() {
            if (typeof this.dataForm.projectSaveDTO.operators === 'string') {
                this.dataForm.projectSaveDTO.operators = this.dataForm.projectSaveDTO.operators;
            } else if (Array.isArray(this.dataForm.projectSaveDTO.operators)) {
                this.dataForm.projectSaveDTO.operators = this.dataForm.projectSaveDTO.operators.join(',')
            } else {
                // 可能需要设置一个默认值  
                this.dataForm.projectSaveDTO.operators = '';
            }
        },
    }
}
</script>

<style lang="scss" scoped>
.headerSty {
    display: flex;
    justify-content: space-between;
    width: 97%;
}

.headerLeftSty {
    display: flex;
    align-items: center;
}

.navSty {
    height: 15px;
    width: 5px;
    background: rgb(90, 156, 248);
}

.textSty {
    margin-left: 8px;
    font-size: 16px;
    font-weight: 700;
}
</style>